<template>
    <div id="logisticsinformation">
        <el-card>
            <el-select class="select-prefix" size="mini" v-model="time" v-loadmore="loadMore" placeholder="请选择结算周期" clearable filterable style="width: 400px">
                <template slot = "prefix">
                    <span class = 'prefixSlot'>选择周期</span>
                </template>
                <el-option
                    v-for="item in weeksArray"
                    :key="item.yearth+'.' +item.weekth"
                    :label="'第' + item.weekth + '周    ' +item.firstDay + '~' + item.seventhDay"
                    :value="item.firstDay + ',' +item.seventhDay">
                    <span style="float: left">{{ '第' +item.weekth + '周'}}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.firstDay + '~' + item.seventhDay }}</span>
                </el-option>
            </el-select>
            <el-button type="primary" size="mini" @click="handleUpload">上传物流明细</el-button>
        </el-card>
        <el-card class="mg-t-10">
            <el-table :data="tableData" border stripe>
                <el-table-column label="结算日期">
                    <template slot-scope="scope">
                        <span>{{scope.row.gmtStart}}</span> ~ <span>{{scope.row.gmtEnd}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="文件名称" prop="fileName" show-overflow-tooltip></el-table-column>
                <el-table-column label="上传人" prop="uploadUser"></el-table-column>
                <el-table-column label="上传状态" prop="uploadStatus">
                    <template slot-scope="scope">
                        <el-tag size="small" :type="scope.row.uploadStatus == 0 ? 'success' : ''">
                            {{scope.row.uploadStatus == 0 ? '成功' : '--'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="成功行数" prop="successRow"></el-table-column>
                <el-table-column label="失败行数" prop="failRow"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="handleClickDownLoad(scope.row)">下载</el-button>
                        <el-button type="text" size="mini" @click="handleClickDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <page v-if="total" :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
        </el-card>
        <uploadFile v-if="isShow" :type="type" :startDate="startDate" :endDate="endDate" :title="title" :isShowUpload="isShow" @cancelShow="cancelShow" @logisticUploadList="logisticUploadList" ></uploadFile>
        
    </div>
</template>
<script>
    import page from '../../commonComponents/page'
    import uploadFile from '../../commonComponents/uploadFile'
    export default {
        components: {page, uploadFile},
        data() {
            return {
                page: 1,
                size: 10,
                total: 0,
                tableData: [],
                time: '',
                title: '上传物流明细',
                isShow: false,
                type: 'logistic',
                startDate: '',
                endDate: '',
                loadPage: 0,
                weeksArray: [],
                isNomore: false,
            }
        },
        mounted() {
            this.logisticUploadList()
            this.getWeekList()
        },
        methods: {
             getWeekList() {
                let params= {
                    insertYearNum: this.loadPage
                }
                this.$server.financialControlApi.getWeekList(params).then(res => {
                    if(res.data.weeks.length > 0) {
                        this.weeksArray= this.weeksArray.concat(res.data.weeks.reverse()) 
                        if(this.loadPage == 0) {
                                this.nowWeeksth= res.data.weekth
                        }
                    }else{
                        this.isNomore= true
                    }
                    console.log(this.weeksArray)
                    if(this.loadPage == 0) {
                        let arr= []
                        this.weeksArray.forEach((item,index) => {
                            if(item.weekth < this.nowWeeksth) {
                                arr.push(item)
                            // this.weeksArray.splice(index, 1)
                            }
                        })
                        this.weeksArray= arr
                    }
                })
            },
            loadMore() {
                if(!this.isNomore) {
                    this.loadPage--
                    this.getWeekList()
                }
            },
            logisticUploadList() {
                let params= {
                    page: this.page,
                    size: this.size
                }
                this.$server.financialControlApi.logisticUploadList(params).then(res => {
                    this.tableData= res.data
                    this.total= res.total
                })
            },
            handlePageChange(val) {
                this.total= 0
                this.page= val
                this.logisticUploadList()
            },
            handleSizeChange(val) {
                this.total= 0
                this.size= val
                this.logisticUploadList()
            },
            handleUpload() {
                if(this.time !='' ) {
                    this.startDate= this.time.split(',')[0]
                    this.endDate= this.time.split(',')[1]
                    this.isShow= true
                }else{
                
                    this.$alert('未选择时间')
                }
            },
            cancelShow(val) {
                this.isShow= val
            },
            /**下载 */
            handleClickDownLoad(scope) {
                let fileName= scope.md5Id + '.xlsx'
                let link = document.createElement('a');
            　　 link.href = process.env.BASE_API + '/finance_express_excel/' + fileName;
            　　 document.body.appendChild(link);
            　　 link.click(); //点击下载
            　　 document.body.removeChild(link); //下载完成移除元素
            },
            handleClickDel(scope) {
                this.$confirm('确定删除？').then(_ => {

                    this.$server.financialControlApi.deleteLogistic(scope.md5Id).then(res => {
                        this.logisticUploadList()
                    })
                }).catch()
            }
        }
    }
</script>